<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="/head.jsp" />
<script type="text/javascript">
  $(function () {
      $("#increaseForm").bootstrapValidator({
          message:'This value is not valid',
          feedbackIcons: {
              valid: 'glyphicon glyphicon-ok',
              invalid: 'glyphicon glyphicon-remove',
              validating: 'glyphicon glyphicon-refresh'
          },
          fields:{
              personName:{
                  message:'姓名非法',
                  validators:{
                      notEmpty:{
                          message:'姓名不能为空'
                      },
                      stringLength:{
                          min:2,
                          max:10,
                          message:'姓名长度必须位于2到10之间'
                      },
                      regexp:{
                          regexp:/^[\u4e00-\u9fa5]{2,10}$/,
                          message:'姓名由汉字组成'
                      }
                  }
              },
              identityNumber:{
                  message:'身份证号码非法',
                  threshold :18 ,
                  validators:{
                      notEmpty:{
                          message:'身份证号码不能为空'
                      },
                      stringLength:{
                          min:18,
                          max:18,
                          message:'身份证号码长度必须为18位数字'
                      },
                      regexp:{
                      	regexp:/^[a-zA-Z0-9]+$/,
                          message:'身份证号码由数字字母组成'
                      },
                      remote: {
                          url: '/test/validateIDCard.do',
                          message: '身份证号码已存在',
                          type: 'POST',
                          data:{
	                          	  birthTime: function(){ return $("#birthTime").val(); },
	                          	  id: function(){ return $("#id").val(); }
                          }
                      },
                  }
              },
                gender:{
                    validators:{
                        notEmpty:{
                            message:'请选择性别'
                        },
                    }
                },
                maritalStatus:{
                    validators:{
                        notEmpty:{
                            message:'请选择婚姻状况'
                        },
                    }
                },
                birthTime:{
                    validators:{
                        notEmpty:{
                            message:'请输入出生日期'
                        },
                        remote: {
                            url: '/test/validateBirthTime.do',
                            message: '出生日期不得晚于当前日期',
                            type: 'POST',
                        },
                    }
                },
                spouseName:{
                    message:'配偶姓名非法',
                    validators:{
                        stringLength:{
                            min:2,
                            max:10,
                            message:'配偶姓名长度必须位于2到10之间'
                        },
                        regexp:{
                            regexp:/^[\u4e00-\u9fa5]{2,10}$/,
                            message:'配偶姓名由汉字组成'
                        }
                    }
                },
          },
         
      })
      		
		$('#birthTime').datepicker({
			format: 'yyyy-mm-dd',
			language:  "zh-CN",  
		    todayBtn : "linked",  
		    autoclose : true,  
		    todayHighlight : true,  
		    clearBtn:true,  
		    }).on('changeDate',function(e) {  
		        $('#increaseForm').data('bootstrapValidator')
		        .updateStatus('birthTime', 'NOT_VALIDATED',null)  
		        .validateField('birthTime');  
			});  
      
		var value = $("#maritalStatus2").val()//对应select的onChange属性
		if(value=="21"||value=="22"||value=="23"){
				$("#spouseName").prop('readonly', false);
		}else if(value==""||value=="10"||value=="30"||value=="40"||value=="90"){
			$("#spouseName").prop('readonly', true);
		}
		   
		var gender=$("#gender2").val();
		$("#gender").find("option[value="+gender+"]").attr("selected",true);
		
		var maritalStatus=$("#maritalStatus2").val();
		$("#maritalStatus").find("option[value="+maritalStatus+"]").attr("selected",true);

})
		
      function change(){  
      	var value = $("#maritalStatus").val()//对应select的onChange属性
  			if(value=="21"||value=="22"||value=="23"){
  					$("#spouseName").prop('readonly', false);
  			}else if(value==""||value=="10"||value=="30"||value=="40"||value=="90"){
  				$("#spouseName").prop('readonly', true);
  				$("#spouseName").val("");
  			}
      }
</script>
<style>
body {
	padding:20px;
	position: relative;
}
h3{
	text-align:center;
}
</style>
</head>
<body>

<div class="container col-md-8 col-md-offset-2">
    <div class="page-header">
        <h3>增加人员信息</h3>
    </div>
    <div>
		<form action="/test/addOrUpdatePerson.do" method="post"	id="increaseForm" class="form-horizontal" >
			<input type="hidden"id="id"  name="id" value="${person.id}" />
			
			  <div class="form-group">
       				<label for="personName" class="col-md-2 control-label">姓名</label>
  					<div class="col-md-7">
       						<input type="text" class="form-control" id="personName" name="personName" value="${person.personName }" placeholder="请输入姓名">
  					</div>
 			 </div>
 			 
 			 <div class="form-group">
       				<label for="birthTime" class="col-md-2 control-label">出生日期</label>
  					<div class="col-md-7">
							<input type="text"  class="form-control"name="birthTime" id="birthTime"  value="${person.birthTime.toString().substring(0, 10)}"  readonly placeholder="请输入出生日期"/>
  					</div>
 			 </div>
 			 			
			  <div class="form-group">
       				<label for="identityNumber" class="col-md-2 control-label">身份证号码</label>
  					<div class="col-md-7">
       						<input type="text" class="form-control" id="identityNumber" name="identityNumber" value="${person.identityNumber }" placeholder="请输入身份证号码" >
       						<span id="identityNumberText"></span>
  					</div>
 			 </div>
 			 
			<div class="form-group">
				<label for="gender" class="col-md-2 control-label">性别</label> 
				<div class="col-md-7 ">
					<input type="hidden" id="gender2" value="${person.gender}"/> 
					          <select class="form-control" id="gender" name="gender" style="width: 200px;">
					          		<option value="">请选择性别</option>
					          		<option value="0">未知的性别</option>
					          		<option value="1">男</option>
					          		<option value="2">女</option>
					          		<option value="9">未说明的性别</option>
					          </select>
				</div>
			</div>
			
			<div class="form-group">
				<label for="maritalStatus" class="col-md-2 control-label">婚姻状况</label> 
				<div class="col-md-7" >
					<input type="hidden" id="maritalStatus2" value="${person.maritalStatus}"/> 
					          <select class="form-control" id="maritalStatus" name="maritalStatus" style="width: 200px;"onchange="change();" >
					          		<option value="">请选择婚姻状况</option>
					          		<option value="10">未婚</option>
					          		<option value="21">初婚</option>
					          		<option value="22">再婚</option>
					          		<option value="23">复婚</option>
					          		<option value="30">丧偶</option>
					          		<option value="40">离婚</option>
					          		<option value="90">未说明的婚姻状况</option>
					          </select>
				</div>
			</div>

			<div class="form-group">
       				<label for="spouseName" class="col-md-2 control-label">配偶姓名</label>
  					<div class="col-md-7">
       						<input type="text" class="form-control" id="spouseName" name="spouseName" value="${person.spouseName }" placeholder="请输入配偶姓名"readonly>
  					</div>
 			 </div>

			<div class="form-inline col-md-offset-5">
				<button type="submit" class="btn btn-primary" > 保存并关闭 </button>
			</div>
		</form>
		</div>
		</div>
</body>
</html>
